<template>
  <div>
    <el-form :model="loggin" status-icon :rules="logginYZ" ref="loggin" class="mar_top">
      <el-form-item>
        <el-col :span="24">
          <el-input placeholder="请输入手机号码" v-model="loggin.phone" maxlength="11">
            <i slot="prefix" class="el-input__icon fa fa-user-o"></i>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item prop="password">
        <el-col :span="24">
          <el-input placeholder="密码" :show-password="true" type="password" v-model="loggin.password">
            <i slot="prefix" class="el-input__icon fa fa-lock"></i>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item prop="yzm">
        <el-col>
          <el-col :span="24">
            <el-col :span="13">
              <el-input placeholder="请输入短信验证码" maxlength="6" v-model="loggin.yzm">
                <i slot="prefix" class="el-input__icon fa fa-user-o"></i>
              </el-input>
            </el-col>
            <el-col :span="1" style="height:2.5rem;"></el-col>
            <el-col :span="10" class="tr">
              <el-button :loading="$store.state.isLoading" @click="sendcode()" :disabled="!this.canClick">{{ this.content }}</el-button>
            </el-col>
          </el-col>
        </el-col>
      </el-form-item>
      <el-form-item class="tl">
        <el-col :span="24">
          <el-checkbox v-model="isLogin">
            勾选代表同意
            <a href="#" class="sizeColor_lan">【授权使用协议】</a>
          </el-checkbox>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-col :span="24">
          <el-button :loading="$store.state.isLoading" class="btn_login" @click.prevent="loginAdmin('loggin')" v-loading="load"
              element-loading-text="注册中…">注册</el-button>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// import PhoneQuhao from "@/components/phoneQuhao/PhoneQuhao";
import Cookies from "js-cookie";
export default {
  name: "passLogin",
  components: {},
  data () {
    return {
      isLogin: true,
      load: false,
      loggin: {
        phone: "",
        password: "",
        yzm: "",
        unicode: ""
      },
      logginYZ: {
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
        yzm: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
          { min: 4, max: 4, message: "请输入4位验证码", trigger: "blur" }
        ]
      },
      content: "发送验证码",
      totalTime: 60,
      canClick: true
    };
  },
  methods: {
    sendcode () {
      var data = {};
      data["tel"] = this.loggin.phone;
      this.$api.login.sendcode(data).then(res => {
        if (res.data.code == 200) {
          this.loggin.unicode = res.data.result;
          this.countDown(); //倒计时
        } else {
          this.$swal("操作失败！", "出错啦！", "success");
        }
      });
    },
    countDown () {
      if (!this.canClick) return; //防重复点击
      this.canClick = false;
      let clock = window.setInterval(() => {
        this.totalTime--;
        this.content = this.totalTime + "s后重新发送";
        if (this.totalTime < 0) {
          //当倒计时小于0时清除定时器
          window.clearInterval(clock);
          this.content = "发送验证码";
          this.totalTime = 60;
          this.canClick = true; //这里重新开启
        }
      }, 1000);
    },

    loginAdmin (formName) {
      this.$refs[formName].validate(valid => {
        if (!this.isLogin) {
          this.$fnc.alertError("登录失败", "请授权使用协议");
          return false;
        }
        if (valid) {
          var data = {};
          data["tel"] = this.loggin.phone;
          data["password"] = this.$getCode(this.loggin.password);
          data["code"] = this.loggin.yzm;
          data["unicode"] = this.loggin.unicode;
          data["cltrlclass"] = "login";
          data["action"] = "phonelogin";
          this.$api.login.phonelogin(data).then(res => {
            if (res.data.code == 200) {
              localStorage.setItem("adminuid", res.data.result.uid);
              localStorage.setItem("admin_key", res.data.result.key);
              Cookies.set("adminuid", res.data.result.uid, { expires: 30 });
              Cookies.set("admin_key", res.data.result.key, { expires: 30 });
              this.$store.commit("setAdminname", res.data.result.username ||'');
              if (
                this.$route.query.redirect &&
                this.$route.query.redirect != "/login"
              ) {
                let redirect = this.$route.query.redirect;
                this.$router.push(redirect);
                this.$store.commit("setTzUrl", redirect);
              } else {
                this.$router.push("/index");
              }
            } else {
              this.$fnc.alertError(res.data.code_desc, res.data.result);
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.row {
  height: 42px;
  line-height: 42px;
  border: 1px solid #e3e7ed;
  position: relative;
  div > i {
    padding-left: 10px;
    font-size: 1.3rem;
    color: #e3e7ed;
    display: inline-block;
    line-height: 2.5rem;
  }
}
.i1 {
  padding-right: 10px;
  line-height: 42px;
}
.phont_text {
  cursor: pointer;
  display: inline-block;
  position: relative;
  top: -2px;
}
.phont_text + i {
  padding: 0 10px;
  cursor: pointer;
}

#emit_yzm {
  padding-left: 1rem;
  color: #5dd5c8;
  font-size: 14px;
  border-left: 1px solid #ddd;
}
form input {
  background: transparent;
}
.btn_login {
  width: 100%;
  color: #fff;
  border-color: #5dd5c8;
  background-color: #5dd5c8;
}
.btn_login:hover {
  color: #333;
  border-color: #ddd;
  background-color: #fff;
}
</style>
